json-serverを使ってみる

json-serverについて

json-serverはJSONのデータを返すようなRESTフルなサーバーをお手軽に作れるアプリケーションです。 モックサーバーが欲しい場合などに便利です。

後で詳しくは書きますが、単にJSONを返すだけでなく、POSTメソッドによるデータの追加やある程度複雑なクエリなどにも対応しています。 なので、そこまで複雑で無いデータ構造のコンテンツをRESTフルで使いやすくホスティングするのにも便利です。

インストールする

NPMで配信されているので以下のコマンドでインストール可能です。 以下はグローバルにインストールする場合です。

npm install -g json-server

今回はグローバルに使用せずにプロジェクトにインストールして使います。

npm install json-server

起動する

今回はプロジェクト以下にインストールしているのでnpxを使用して起動します。 グローバルにインストールしてる場合はnpx部分は不要です。

--watchオプションでデータの元となるDBを指定できます。

npx json-server --watch db.json

今回は後述の説明用に、公式で用意されてたデータを少し変えて、以下のようなJSONファイルを用意しました。

{
  "posts": [
    { "id": 1, "title": "first", "author": ["foo"], "favorits": 10 },
    { "id": 2, "title": "second", "author": ["bar", "baz"], "favorits": 1 }
  ],
  "profile": { "name": "ashi", "age": 2 }
}

使い方

デフォルトではローカルホストの3000番ポートを使用してサーバーが起動するので、そこにcURLでアクセスして挙動を確認していきます。

GET

$ curl http://localhost:3000/posts
[
  {
    "id": 1,
    "title": "first",
    "author": [
      "foo"
    ],
    "favorits": 10
  },
  {
    "id": 2,
    "title": "second",
    "author": [
      "bar",
      "baz"
    ],
    "favorits": 1
  }

GETはJSONファイル内のトップレベルのフィールドのオブジェクトを返します。 ここではpostsとprofileの２つが該当します。

postsはリスト形式なので以下のようにインデックスを指定して、単体で取得することも可能です。

$ curl http://localhost:3000/posts/1
{
  "id": 1,
  "title": "first",
  "author": [
    "foo"
  ],
  "favorits": 10
}

ちなみにこういう取得の仕方はできません。

$ curl http://localhost:3000/profile => OK
{
  "name": "ashi",
  "age": 2
}
$ curl http://localhost:3000/profile/name => NG
{}

リスト系の便利な機能

リストを返すようなルートの場合は様々なオプションが利用できます。

• フィルター
• ページネーション
• ソート
• スライス
• 範囲検索（以上、以下）
• 否定（Not Equal）
• 部分一致
• 全文検索
• 結合(IDが一致する別ルートのオブジェクトを埋め込む)

説明が長くなるので詳細はここでは省略しますが、詳細が公式リポジトリに書いてあるのでぜひ読んでみてください。

POST

$ curl http://localhost:3000/posts -X POST -H 'Content-Type: application/json' -d '{ "id": 3, "title": "third", "author": ["baz"], "favorits": 0 }'
{
  "id": 3,
  "title": "third",
  "author": [
    "baz"
  ],
  "favorits": 0
}
$ curl http://localhost:3000/profile -X POST -H 'Content-Type: application/json' -d '{ "name": "ashi"}'
{
  "name": "ashi"
}

POSTメソッドを使ってデータの追加が可能です。 リストのルートであれば追加、単体のルートであれば置き換えられます。 これを行うと、db.jsonの方にもデータが追加されます。

PUT

リストのルートであれば、インデックスをパスで指定することで、PUTメソッドで置き換えることも可能です。

$ curl http://localhost:3000/posts/1 -X PUT -H 'Content-Type: application/json' -d '{ "id": 1, "title": "first fixed", "author": ["bar"], "favorits": 10 }'
{
  "id": 1,
  "title": "first fixed",
  "author": [
    "bar"
  ],
  "favorits": 10
}

PATCH

PATCHメソッドを使えば部分更新も可能です。 更新したい値だけをリクエストのJSONに含めれば、元の値は残して更新が発生します。

$ curl http://localhost:3000/posts/1 -X PATCH -H 'Content-Type: application/json' -d '{ title": "first refixed"}'
{
  "id": 1,
  "title": "first refixed",
  "author": [
    "bar"
  ],
  "favorits": 10
}
$ curl http://localhost:3000/profile -X PATCH -H 'Content-Type: application/json' -d '{ "region": "ap-northeast-1"}'
{
  "name": "ashi",
  "region": "ap-northeast-1"
}

リクエストの確認など

モックサーバーなどの用途として使っている場合、リクエストのヘッダーなどの情報が見たい場合があると思います。 そういった場合は、ミドルウェアを作成し、json-serverに読み込ませれば出力可能です。

module.exports = (req, res, next) => {
  console.log(req.headers);
  next();
};

npx json-server --watch db.json --middlewares middleware.js

--middlewaresオプションを使用すればミドルウェアを読み込ませることができます。

終わりに

簡単な返答だけできるサーバーがほしい場合に便利だと思いました。 ただ、単なるモックサーバー以上に高機能なので、取得しやすい感じでデータを提供したい場合なども便利なんじゃないかと思いました。